<template>
	<view class="container">
    <view class="loginDoctor">
      <image src="/static/image/lgoin_doctor.png"></image>
    </view>
    <view class="loginRobot">
      <image src="/static/image/robot.png"></image>
    </view>
		<view class="loginForm">
      <view class="loginTitle">
        欢迎来到AI心理诊断系统！
      </view>
		    <up-form
		        labelPosition="top"
		        :model="userInfo"
		        :rules="rules"
            labelWidth="100"
		        ref="loginFormRef"
		    >
          <up-form-item
              label="诊断机构"
              prop="name"
              borderBottom
              ref="item1"

          >
            <up-input
                v-model="userInfo.organization"
                placeholder="请输入或选择诊断机构"
                :disabled="true"
            ></up-input>
          </up-form-item>
		      <up-form-item
		          label="账号"
		          prop="username"
		          borderBottom
		          ref="item1"
              required
		      >
		        <up-input
		            v-model="userInfo.username"
		            placeholder="请输入账号"
		        ></up-input>
		      </up-form-item>
		      <up-form-item
		          label="密码"
		          prop="password"
		          borderBottom
		          ref="item1"
              required
		      >
		        <up-input
		            v-model="userInfo.password"
		            placeholder="请输入密码"
                clearable
                :password="true"
		        ></up-input>
		      </up-form-item>
		    </up-form>
<!--		    <uni-forms label-position="top" :mode="userInfo" :rules="rules" ref="loginFormRef" label-width="100">-->
<!--          <uni-forms-item label="诊断机构" prop="organization" ref="organization">-->
<!--            <uni-easyinput v-model="userInfo.organization" placeholder="请输入诊断机构"></uni-easyinput>-->
<!--          </uni-forms-item>-->
<!--          <uni-forms-item label="账号" prop="username" ref="username">-->
<!--            <uni-easyinput v-model="userInfo.username" placeholder="请输入账号"></uni-easyinput>-->
<!--          </uni-forms-item>-->
<!--          <uni-forms-item label="密码" prop="password" ref="password">-->
<!--            <uni-easyinput v-model="userInfo.password" placeholder="请输入密码"></uni-easyinput>-->
<!--          </uni-forms-item>-->
<!--        </uni-forms>-->
		    <up-button class="loginBtn" :disabled="loginDisable" @click="handleSubmit" :loading="submitLoading">
		      登录
		    </up-button>

		<!--    <up-action-sheet-->
		<!--        :show="showSex"-->
		<!--        :actions="actions"-->
		<!--        title="请选择性别"-->
		<!--        description="如果选择保密会报错"-->
		<!--        @close="showSex = false"-->
		<!--        @select="sexSelect"-->
		<!--    >-->
		<!--    </up-action-sheet>-->
		  </view>
	</view>

</template>

<script setup lang="ts">
import {ref, reactive, computed} from 'vue';
import {GetInfo, LOGIN} from "@/utils/info";
const showSex = ref(false)

const userInfo = reactive({
  username:'',
  password:'',
  organization:'啄木鸟'
})
const rules = reactive({
  'username': {
    type: 'string',
    required: true,
    message: '请填写姓名',
    trigger: ['blur', 'change'],
  },
  'password': {
    type: 'string',
    required: true,
    message: '请填写密码',
    trigger: ['blur', 'change'],
  },

})
// 使用 ref 创建响应式引用
const loginFormRef = ref(null);
const submitLoading = ref(false)
const loginDisable = computed(()=>{
  return (userInfo.username == '' || userInfo.password == '');
})
const handleSubmit = ()=>{
  if (loginFormRef.value) {
    console.log(loginFormRef.value, 'loginFormRef')
    loginFormRef.value.validate().then(() => {
      submitLoading.value = true
      LOGIN(userInfo).then(() => {
        // message.success("登录成功，即将跳转！")
        uni.showToast({
          title:"登录成功，即将跳转！",
          icon:'success',
          duration: 1000,
        })
        GetInfo().then((res:any) => {
          console.log(res)
          setTimeout(() => {
            submitLoading.value = false
            // subOpen.value = false
            uni.navigateTo({
              url:'/pages/home/home?type=1'
			  // url:'/pages/association/association'
            })
          }, 1000)
        }).catch((err: any) => {
          uni.showToast({
            title:err,
            icon:'none',
            duration: 1000,
          })
          submitLoading.value = false
        })
      }).catch((err: any) => {
        uni.showToast({
          title:err,
          icon:'none',
          duration: 1000,
        })
        submitLoading.value = false
      })
    }).catch((err: any) => {
      console.log(err)
      submitLoading.value = false
    })
  }
}
</script>

<style scoped lang="scss">
.container{
  overflow: hidden;
  position: relative;
	width: 100%;
	height: 100%;
  background-image: url("@/static/image/login_bg.png");
  background-size: 100% 100%;
  .loginDoctor{
    position: absolute;
    height: 390rpx;
    width: 210rpx;
    left: 60rpx;
    bottom: 0rpx;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .loginRobot{
    position: absolute;
    left: 240rpx;
    bottom: 0rpx;
    width: 140rpx;
    height: 146rpx;
    image{
      width: 100%;
      height: 100%;
    }

  }
}
.loginForm {
  width: 284.7rpx;
  height: 336.57rpx;
  background: #FFFFFF;
  border-radius: 17.16rpx;
  position: absolute;
  right: 60rpx;
  bottom: 30rpx;
  padding: 38rpx 32rpx;
  .loginTitle{
    font-weight: 500;
    font-size: 15.6rpx;
    color: #2D2955;
    letter-spacing: 0;
    margin-bottom: 28rpx;
  }
}
.loginBtn{
  margin-top: 23rpx;
  background: #353DFF;
  border-radius: 14.24rpx;
  color: #fff;
}
::v-deep .u-form-item__body{
  gap: 5rpx;
  padding: 5rpx 0;
}
</style>
